<template>
  <view class="contacts-container">
    <!-- 顶部栏 -->
    <view class="header">
      <text class="header-title">联系人</text>
      <view class="header-actions">
        <view class="action-btn" @tap="showNewContactMenu">
          <text class="action-icon">+</text>
        </view>
        <view class="action-btn" @tap="showMoreMenu">
          <text class="action-icon">•••</text>
        </view>
      </view>
    </view>
    
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="search-icon">🔍</text>
        <input type="text" placeholder="搜索" placeholder-style="color: #999" v-model="searchKeyword" @input="searchContacts"/>
      </view>
    </view>
    
    <!-- 联系人分组标题 -->
    <view class="group-section">
      <text class="group-title">我的群组</text>
    </view>
    
    <!-- 群组列表 -->
    <view class="contacts-list">
      <view v-for="(group, index) in groups" :key="index" class="contact-item" @tap="openGroup(group)">
        <view class="contact-avatar group-avatar">
          <text class="avatar-icon">{{ group.icon }}</text>
        </view>
        <view class="contact-info">
          <text class="contact-name">{{ group.name }}</text>
          <text class="contact-desc">{{ group.desc }}</text>
        </view>
        <view class="contact-arrow">
          <text class="arrow-icon">→</text>
        </view>
      </view>
    </view>
    
    <!-- 字母索引 -->
    <view class="letter-index">
      <text v-for="(letter, index) in letters" :key="index" class="index-letter" @tap="scrollToLetter(letter)">
        {{ letter }}
      </text>
    </view>
    
    <!-- 联系人列表 -->
    <view class="contacts-section">
      <view v-for="(letter, index) in Object.keys(filteredContacts)" :key="index">
        <view class="contact-group-header">
          <text class="group-letter">{{ letter }}</text>
        </view>
        <view class="contacts-list">
          <view v-for="(contact, idx) in filteredContacts[letter]" :key="idx" class="contact-item" @tap="openContactDetail(contact)">
            <view class="contact-avatar" :style="{ backgroundColor: contact.color }">
              <text class="avatar-text">{{ contact.avatar }}</text>
            </view>
            <view class="contact-info">
              <text class="contact-name">{{ contact.name }}</text>
              <text class="contact-desc">{{ contact.desc }}</text>
            </view>
            <view class="contact-arrow">
              <text class="arrow-icon">→</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      letters: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      groups: [
        { id: 1, name: '产品部', desc: '32人', icon: '🏢' },
        { id: 2, name: '前端开发组', desc: '8人', icon: '💻' },
        { id: 3, name: '设计组', desc: '6人', icon: '🎨' },
        { id: 4, name: '项目进度群', desc: '12人', icon: '📊' }
      ],
      contacts: {
        '#': [
          { id: 1, name: '张三', avatar: '张', color: '#FF6B6B', desc: '产品经理' },
          { id: 2, name: '李四', avatar: '李', color: '#4ECDC4', desc: 'UI设计师' }
        ],
        'W': [
          { id: 3, name: '王五', avatar: '王', color: '#45B7D1', desc: '前端开发工程师' },
          { id: 4, name: '王维', avatar: '王', color: '#96CEB4', desc: '测试工程师' }
        ],
        'Z': [
          { id: 5, name: '赵六', avatar: '赵', color: '#FFEAA7', desc: '后端开发工程师' },
          { id: 6, name: '郑七', avatar: '郑', color: '#DDA0DD', desc: '运维工程师' }
        ],
        'L': [
          { id: 7, name: '李白', avatar: '李', color: '#F08080', desc: '数据分析师' },
          { id: 8, name: '李清照', avatar: '李', color: '#9370DB', desc: '产品运营' }
        ],
        'C': [
          { id: 9, name: '曹操', avatar: '曹', color: '#20B2AA', desc: '项目经理' },
          { id: 10, name: '曹丕', avatar: '曹', color: '#FFA07A', desc: '产品助理' }
        ]
      },
      filteredContacts: {}
    };
  },
  onLoad() {
    // 初始化时过滤联系人（显示全部）
    this.filteredContacts = { ...this.contacts };
  },
  methods: {
    // 搜索联系人
    searchContacts() {
      const keyword = this.searchKeyword.toLowerCase();
      
      if (!keyword) {
        this.filteredContacts = { ...this.contacts };
        return;
      }
      
      // 过滤联系人
      const filtered = {};
      
      Object.keys(this.contacts).forEach(letter => {
        const letterContacts = this.contacts[letter].filter(contact => 
          contact.name.toLowerCase().includes(keyword) || 
          contact.desc.toLowerCase().includes(keyword)
        );
        
        if (letterContacts.length > 0) {
          filtered[letter] = letterContacts;
        }
      });
      
      this.filteredContacts = filtered;
    },
    
    // 滚动到指定字母
    scrollToLetter(letter) {
      // 模拟滚动效果
      uni.showToast({
        title: `滚动到 ${letter}`,
        icon: 'none',
        duration: 1000
      });
    },
    
    // 打开群组
    openGroup(group) {
      uni.navigateTo({
        url: `/pages/demo/group?id=${group.id}&name=${encodeURIComponent(group.name)}`
      });
    },
    
    // 打开联系人详情
    openContactDetail(contact) {
      uni.navigateTo({
        url: `/pages/demo/contact?id=${contact.id}&name=${encodeURIComponent(contact.name)}`
      });
    },
    
    // 显示新建联系人菜单
    showNewContactMenu() {
      uni.showActionSheet({
        itemList: ['添加联系人', '添加群聊'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.addNewContact();
          } else if (res.tapIndex === 1) {
            this.createNewGroup();
          }
        }
      });
    },
    
    // 显示更多菜单
    showMoreMenu() {
      uni.showActionSheet({
        itemList: ['设置', '帮助与反馈', '刷新'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.navigateToSettings();
          } else if (res.tapIndex === 1) {
            this.showHelpFeedback();
          } else if (res.tapIndex === 2) {
            this.refreshContacts();
          }
        }
      });
    },
    
    // 添加新联系人
    addNewContact() {
      uni.showToast({
        title: '打开添加联系人界面',
        icon: 'none'
      });
    },
    
    // 创建新群聊
    createNewGroup() {
      uni.showToast({
        title: '打开创建群聊界面',
        icon: 'none'
      });
    },
    
    // 导航到设置
    navigateToSettings() {
      uni.navigateTo({
        url: '/pages/demo/settings'
      });
    },
    
    // 显示帮助与反馈
    showHelpFeedback() {
      uni.navigateTo({
        url: '/pages/demo/help'
      });
    },
    
    // 刷新联系人
    refreshContacts() {
      uni.showLoading({
        title: '刷新中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '刷新成功'
        });
      }, 1500);
    }
  }
};
</script>

<style scoped>
.contacts-container {
  height: 100vh;
  background-color: #f8f9fc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
}

/* 顶部栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
}

.action-btn {
  margin-left: 40rpx;
}

.action-icon {
  font-size: 32rpx;
  color: #333;
}

/* 搜索栏 */
.search-bar {
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.search-input {
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  border-radius: 40rpx;
  padding: 15rpx 25rpx;
}

.search-icon {
  font-size: 28rpx;
  color: #999;
  margin-right: 15rpx;
}

.search-input input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  background: transparent;
}

/* 群组标题 */
.group-section {
  padding: 20rpx 30rpx;
  background-color: #f2f2f2;
}

.group-title {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

/* 联系人列表 */
.contacts-list {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #f2f2f2;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #667eea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25rpx;
}

.group-avatar {
  background-color: #4ECDC4;
}

.avatar-icon {
  font-size: 48rpx;
}

.avatar-text {
  font-size: 40rpx;
  color: #fff;
  font-weight: 600;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-size: 32rpx;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.contact-desc {
  font-size: 24rpx;
  color: #999;
}

.contact-arrow {
  color: #ccc;
}

.arrow-icon {
  font-size: 28rpx;
}

/* 字母索引 */
.letter-index {
  position: fixed;
  right: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
}

.index-letter {
  font-size: 20rpx;
  color: #666;
  padding: 5rpx 0;
  line-height: 1;
}

/* 联系人分组 */
.contacts-section {
  background-color: #fff;
}

.contact-group-header {
  padding: 15rpx 30rpx;
  background-color: #f2f2f2;
}

.group-letter {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}
</style>